<template>
  <div class="arrange">
    <el-row :gutter="14">
      <el-col :span="12">
        <div class="img-box">
          <pdf-js-iframe :url="pdfSrc" :fileName="rowData.dh + '.pdf'"></pdf-js-iframe>
          <!--<iframe width="100%" height="99.2%" :src="pdfSrc"></iframe>-->
        </div>
      </el-col>
      <el-col :span="12">
        <div class="content">
          <avue-form ref="form"
                     class="add-body"
                     v-model="obj"
                     :option="options"
                     @submit="submit">
            <template slot-scope="scope" slot="qzh">
              <el-select v-model="obj[scope.column.prop]" @change="handleQzh">
                <el-option v-for="(item, index) in scope.column.dicData"
                           :key="index"
                           :value="item.fondsNo"
                           :label="item.fondsNo + ' ' + item.fondsName"></el-option>
              </el-select>
            </template>
          </avue-form>

          <div class="btn-box">
            <el-button size="small" type="primary" :loading="loading" @click="handlePrev">上一条</el-button>
            <el-button size="small" type="primary" :loading="loading" @click="handleNext">下一条</el-button>
<!--            <el-button size="small" type="primary" :loading="loading" v-if="type === 'simplify'">归档</el-button>-->
            <el-button size="small" type="primary" :loading="loading" @click="handleChapter" v-if="type === 'simplify'">生成电子章</el-button>
            <el-button size="small" type="primary" :loading="loading" @click="handleAdd">保存</el-button>
          </div>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  editElectronicsFile, generatedDanghao,
  generateFilingSeal
} from '../../../../../../api/electronicsFile/electronicsFile'
import { mapActions } from 'vuex'
import { mapFields } from 'vuex-map-fields'
import { getDepartmentList } from '../../../../../../api/department/department'
import PdfJsIframe from '../../../../../../components/showPdf/pdfJsIframe'
import { getClassificationTreeForm } from '../../../../../../api/classification'
// import ShowPdf from '../../../../../../components/showPdf/showPdf'

export default {
  name: 'arrange',
  components: { PdfJsIframe },
  props: {
    fmtJson: {
      type: Array,
      default: () => ([])
    },
    pdfSrc: {
      type: String
    },
    idTable: {
      type: String
    },
    idCategory: {
      type: String
    },
    formOptions: {
      // 表单
      type: Object,
      default: () => ({})
    },
    rowData: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String
    },
    page: {
      type: Object
    }
  },
  data () {
    return {
      bumenList: [], // 部门下拉框数据
      loading: false,
      obj: {},
      prevDis: false,
      nextDis: false,
      dhLoading: false
    }
  },
  mounted () {
    if (this.type === 'add') {
      this.obj.qzh = this.userInfo.fonsNo
      this.obj.zldw = this.userInfo.idOrg
      this.getBumen()
    } else {
      const row = JSON.stringify(this.rowData)
      this.obj = JSON.parse(row)
      this.getBumen()
    }
    this.srcpdf = ''
  },
  watch: {
    rowData () {
      const row = JSON.stringify(this.rowData)
      this.obj = JSON.parse(row)
      this.srcpdf = ''
      this.getBumen()
    },
    type () {
      if (this.type === 'add') {
        this.fileList = []
        this.bumenList = []
        this.$refs.form.resetForm()
        this.obj.qzh = this.userInfo.fonsNo
        this.obj.zldw = this.userInfo.idOrg
      }
    }
  },
  computed: {
    ...mapFields('profile/profile', {
      userInfo: 'retrieved'
    }),
    ...mapFields('electronicsFile/setSearchCondition', {
      searchParams: 'retrieved'
    }),
    options () {
      const form = {}
      Object.keys(this.formOptions).forEach(key => {
        if (key !== 'column') {
          form[key] = this.formOptions[key]
        } else {
          form.column = []
          this.formOptions.column.map((item, index) => {
            form.column.push(item)
            this.fmtJson.map((dhgz) => {
              if (dhgz.column === item.prop) {
                form.column[index].rules = [{
                  required: true,
                  message: '请输入' + dhgz.name,
                  trigger: 'blur'
                }]
              }
            })
            if (item.prop === 'zldw') {
              form.column[index].dicData = this.bumenList
            }
            if (item.prop === 'flh') {
              form.column[index].dicData = this.flhTree
              form.column[index].type = 'tree'
              form.column[index].props = {
                label: 'categoryName',
                value: 'classificationCode',
                children: 'children'
              }
            }
          })
        }
      })
      form.column.map(item => {
        if (item.prop === 'dh') {
          const dhguize = []
          this.fmtJson.map((dhgz, index) => {
            if (this.obj[dhgz.column]) {
              if (dhgz.column === 'zldw') {
                this.bumenList.map(item => {
                  if (item.id === this.obj[dhgz.column]) {
                    dhguize[index] = item.orgCode
                  }
                })
              } else {
                dhguize[index] = this.obj[dhgz.column]
              }
              if (dhgz.length > this.obj[dhgz.column].length) {
                dhguize[index] = '0000000000'.substr(0, dhgz.length - this.obj[dhgz.column].length) + this.obj[dhgz.column]
              }
              dhguize[index] = dhguize[index] + dhgz.separator
            }
          })
          this.obj.dh = dhguize.join('')

          /* if (dhguize.length > 1) {
            this.obj.dh = dhguize.slice(0, dhguize.length - 1).join('')
          } else {
            this.obj.dh = dhguize.join('')
          }
          this.obj.dh = this.obj.dh.replace(/-$/gi, '')
          */
        }
      })
      return form
    }
  },
  methods: {
    ...mapActions('electronicsFile/getHead', ['getTableList']),
    handleEdit () {
      this.option.detail = false
    },
    handleQzh () {
      this.obj.zldw = ''
      this.getBumen()
    },
    getBumen () {
      // 根据全宗查部门
      const query = {
        pageSize: 1000,
        pageNo: 1,
        params: [{
          name: 'fondsNo',
          op: 'eq',
          value: this.obj.qzh
        }]
      }
      getDepartmentList(query).then(res => {
        this.bumenList = res.data.data.list
      })

      // 根据全宗和门类查分类号
      let qzId = ''
      this.options.column.map(item => {
        if (item.prop === 'qzh') {
          item.dicData.map(qz => {
            if (qz.fondsNo === this.obj.qzh) {
              qzId = qz.id
            }
          })
        }
      })
      const flhQuery = {
        idCategory: this.idCategory
      }
      if (qzId) {
        flhQuery.fondsNoId = qzId
      }
      getClassificationTreeForm(flhQuery).then(res => {
        this.flhTree = res.data.data
      })
    },
    handlePrev () {
      // 上一条
      this.$emit('handlePrev')
    },
    handleNext () {
      // 下一条
      this.$emit('handleNext')
    },
    handleChapter () {
      // 生成电子章
      generateFilingSeal(this.idTable, this.rowData.id).then(() => {
        this.$message.success('生成电子章成功！')
        this.$emit('handleGetPdfSrc', { idTable: this.idTable, id: this.obj.id })
      })
    },
    handleGenerateDh () {
      // 生成档号
      this.dhLoading = true
      generatedDanghao(this.idTable, this.rowData.id).then((res) => {
        this.$message.success('生成档号成功！')
        this.obj.dh = res.data.data
        this.dhLoading = false
      }).catch(() => {
        this.dhLoading = false
      })
    },
    handleAdd () {
      // 保存
      this.$refs.form.submit()
    },
    submit (form, done) {
      // 保存提交
      this.loading = true
      editElectronicsFile(
        this.idTable,
        { arcId: this.rowData.id, data: form }
      ).then((res) => {
        this.$message.success('保存成功！')
        this.loading = false
        this.getTableList({
          idTable: this.idTable,
          data: {
            pageNo: this.page.pageNo,
            pageSize: this.page.pageSize,
            params: this.searchParams
          }
        })
        done()
      }).catch(() => {
        this.loading = false
        done()
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  .arrange {
    padding: 10px 15px;
    height: 100%;
    background: #e7e7e7;

    .img-box {
      background: #fff;
      border-radius: 5px;
      height: calc(100vh - 75px);
      overflow-y: auto;
    }

    .content {
      height: calc(100vh - 75px);
      background: #fff;
      border-radius: 5px;

      .add-body {
        height: calc(100vh - 128px);
        overflow-y: auto;
        padding-top: 15px;

        ::v-deep .el-card__body {
          padding: 0 20px 0 0;
        }

        ::v-deep .el-form-item {
          margin-bottom: 20px;
        }

        .inline {
          display: flex;
          justify-content: space-between;
        }
      }

      .btn-box {
        text-align: right;
        padding: 10px 0px;
      }
    }
    .dh-input-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .dh-input{
        margin-right: 10px;
      }
    }

  }
</style>
